<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        (function () {
            var metaEl = document.createElement('meta');
            var scale = devicePixelRatio;
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'initial-scale=' + (1 / scale) + ', maximum-scale=' + (1 / scale) + ', minimum-scale=' + (1 / scale) + ', user-scalable=no');
            document.documentElement.firstElementChild.appendChild(metaEl);
        })();
    </script>
    <script src="js/babel.js"></script>
    <script src="js/gesture.js" type="text/babel"></script>
    <script src="js/Carousel.js" type="text/babel"></script>
    <!-- <script type="text/javascript" src="js/progress.js"></script> -->
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>
<body>
    <div id="content">
        <div id="inline"></div>
        <div id="container"></div>

        <div class="main-box">
            <div id="banner">
                <ul id="banner_pic">
                    <li>
                        <img src="./assets/banner.png" />
                    </li>
                    <li>
                        <img src="https://static001.geekbang.org/resource/image/bb/21/bb38fb7c1073eaee1755f81131f11d21.jpg" />
                    </li>
                    <li>
                        <img src="https://static001.geekbang.org/resource/image/1b/21/1b809d9a2bdf3ecc481322d7c9223c21.jpg" />
                    </li>
                    <li>
                        <img src="https://static001.geekbang.org/resource/image/b6/4f/b6d65b2f12646a9fd6b8cb2b020d754f.jpg" />
                    </li>
                    <li>
                        <img src="https://static001.geekbang.org/resource/image/73/e4/730ea9c393def7975deceb48b3eb6fe4.jpg" />
                    </li>
                </ul>
                <nav id="banner_nav">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </nav>
            </div>
            <div id="decorate1"></div>
            <div id="decorate2"></div>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
            <h3>占位1</h3>
        </div>

    </div>
</body>
<script type="text/babel">
    {
        new Carousel({
            imgList:document.querySelector("#banner_pic"),
            navs:document.querySelectorAll("#banner_nav span")
        });
    }
</script>

<script>
    let container=document.querySelector('#container')
    // let progress=document.querySelector('#progress')
    let topp=container.offsetTop //有色框距离body上边框的距离
    window.onscroll=function(){//页面滚动条事件
        let scroll=Math.floor(document.documentElement.scrollTop) //滚动条距离顶部的距离
        let maxScr=document.body.offsetHeight-window.innerHeight  //滚动条能够达到的最大长度（即body的高度减去页面的高度）innerHeight：返回页面可见区的高度。
        let percent=Math.ceil((scroll*100/maxScr))+'%' 
            document.querySelector('#inline').style.width=percent

        if(scroll>topp){
            container.style.position='fixed'
        }else{
            container.style.position='static'
            }
    }
</script>
</html>